<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<title>在线测验系统</title>
	<meta name="viewport"
		content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
	<link rel="stylesheet" th:href="@{/plug/element-ui/theme-chalk/index.css}" />
	<link rel="stylesheet" th:href="@{/plug/vant/lib/index.css}" />
	<link rel="stylesheet" th:href="@{/css/index.css}" />
	<script th:src="@{/plug/vue/vue.js}"></script>
	<script th:src="@{/plug/axios/axios.min.js}"></script>
	<script th:src="@{/plug/axios/request.js}"></script>
	<script th:src="@{/plug/element-ui/index.js}"></script>
	<script th:src="@{/plug/vant/lib/vant.min.js}"></script>
	<script th:src="@{/js/index.js}"></script>
	<style>
		.answer-group {
			padding: 0 16px;
		}

		.answer-group .van-radio {
			margin-bottom: 8px;
		}

		.answer-group .van-checkbox {
			margin-bottom: 8px;
		}
	</style>
</head>

<body>
	<div id="mainApp">
		<van-row>
			<van-nav-bar :title="record?.chapter?.chapterTitle" left-arrow @click-left="onReback">
				<template #left>
					<van-icon name="arrow-left" />
				</template>
				<template #right>
					<van-button size="mini" type="info" @click="submitRecord" v-show="record?.recordStatus*1 !== 2" >提交所有</van-button>
					<van-popover placement="left-start" v-model="showPopover" @select="onSelectPopover" trigger="click"
						:actions="record?.chapter?.chapterType === 1?examActions:chapterActions">
						<template #reference>
							&nbsp;&nbsp; <van-icon name="ellipsis" />
						</template>
					</van-popover>
				</template>
			</van-nav-bar>
		</van-row>
		<van-row>
			<van-panel status="状态">
				<template #default>
					<van-cell>
						<van-row>
							<pre v-html="topic?.topicTitle"></pre>
						</van-row>
						<van-row style="margin-top:10px">
							<van-radio-group v-model="youAnswer" class="answer-group" v-if="topic?.topicType === 0">
								<van-radio @click="saveAnswer" :name="option.optionId"
									v-for="(option, oindex) in topic?.options">{{changeOpText(oindex)}}、{{option.optionText}}</van-radio>
							</van-radio-group>
							<van-checkbox-group v-model="youAnswers" class="answer-group" v-if="topic?.topicType === 1">
								<van-checkbox @click="saveAnswer" :name="option.optionId" v-for="(option, oindex) in topic?.options">
									{{changeOpText(oindex)}}、{{option.optionText}}</van-checkbox>
							</van-checkbox-group>
							<van-cell-group v-if="topic?.topicType === 2">
								<van-field v-model="youAnswer" label="我的回答" placeholder="请输入..." 
									show-word-limit rows="2" maxlength="100" @input="saveAnswer">
									<!--<template #button>
								    	<van-button @click="saveAnswer" size="mini" type="primary" round icon="success" >保存</van-button>
								  	</template>	-->
								</van-field>
							</van-cell-group>
						</van-row>
					</van-cell>
				</template>
				<template #header>
					<van-cell>
						<van-tag size="large" :type="typeColor">{{tIndex*1+1}}：{{typeText}}</van-tag>
						<!--<van-tag size="large" plain v-show="topic?.resp == null">未答题</van-tag>
						<van-tag size="large" plain type="warning" v-show="showResp">已答题</van-tag>
						<van-tag size="large" plain type="success" v-show="showRight">回答正确</van-tag>
						<van-tag size="large" plain type="danger" v-show="showWrong">回答错误</van-tag>-->
						<van-tag size="large" plain :type="respColor">{{respText}}</van-tag>
					</van-cell>
				</template>
				<template #footer>
					<!--<van-cell class="detail-panel-footer">
						<van-button size="small" type="info" icon="success" @click="saveAnswer" v-show="topic?.resp == null" >保存</van-button>
					</van-cell>-->
					<van-cell style="background-color: rgb(240, 240, 240);" v-show="showAnalysis" >
						参考答案：{{answerText}} &nbsp;&nbsp;&nbsp; <span style="color:cadetblue">你的答案：{{youAnswerText}}</span>
						<br>
						解析：<br>
						<pre v-html="topic?.topicAnalysis"></pre>
					</van-cell>
				</template>
			</van-panel>
		</van-row>
		<van-tabbar>
			<van-tabbar-item name="up">
				<van-button :disabled="tIndex == 0" size="small" type="info" icon="arrow-left"
					@click="prevTopic">上一题</van-button>
				<!--<van-button disabled disabled="tIndex == 0" size="small" type="info" icon="arrow-left">上一题</van-button>-->
			</van-tabbar-item>
			<van-tabbar-item name="down">
				<van-button  size="small" type="info" icon="arrow"
					@click="nextTopic">下一题</van-button>
				<!--<van-button disabled v-show="tIndex == topics.length-1" size="small" type="info"
					icon="arrow">下一题</van-button>-->
			</van-tabbar-item>
		</van-tabbar>
	</div>
	<script type="text/javascript">
		const mainApp = {
			el: '#mainApp',
			data: {
				activeMenu: 'home',
				showPopover: false,
				typeColor: 'primary',
				chapterActions: [{text: '答题卡'}, {text: '重做'}],
				examActions: [{text: '答题卡'}, {text: '重做本套题'}, {text: '重新抽取'}],
				value: '',
				topic: null,
				topics: [],
				youAnswer: '',
				youAnswers: [],
				recordId: 0,
				record: null,
				tIndex: 0,
				
				//respColor: 'warning',
				//respText: '未答题'
			},
			mounted() {
				let that = this
				that.recordId = GetQueryString('rId')
				that.tIndex = GetQueryString('index')
				that.getRecord()
			},
			computed: {
				typeText() {
					return ['单选题', '多选题', '填空题'][this.topic?.topicType];
				},
				respColor() {
					let that = this
					if(that.topic?.resp){
						if(that.record.chapter.chapterType === 1){
							return 'warning'
						}
						return that.topic.resp.respResult === 1?'success':'danger'
					}
					return 'warning'
				},
				respText() {
					let that = this
					if(that.topic?.resp){
						if(that.record.chapter.chapterType === 1){
							return '已答题'
						}
						return that.topic.resp.respResult === 1?'回答正确':'回答错误'
					}
					return '未答题'
				},
				answerText() {
					let that = this
					let opstr = ''
					if(this.topic?.topicType === 0){
						for (let o = 0; o < that.topic.options.length; o++) {
							if(that.topic.options[o].optionId === that.topic.topicAnswer){
								opstr = that.topic.options[o].optionText
							}
						}
						return opstr
					}
					if(this.topic?.topicType === 1){
						for (let o = 0; o < that.topic.options.length; o++) {
							for (let a = 0; a < that.topic.topicAnswers.length; a++) {
								if(that.topic.options[o].optionId === that.topic.topicAnswers[a]){
									opstr = opstr + that.topic.options[o].optionText + '、'
								}
							}
						}
						return opstr
					}
					if(this.topic?.topicType === 2){
						return that.topic.topicAnswer
					}
					return opstr
				},
				youAnswerText(){
					let that = this
					var opstr = '';
					if(that.topic?.resp){
						if(that.topic.topicType === 0){
							for (let o = 0; o < that.topic.options.length; o++) {
								if(that.topic.options[o].optionId === that.youAnswer){
									opstr = that.topic.options[o].optionText
								}
							}
						}
						if(that.topic.topicType == 1){
							for (let o = 0; o < that.topic.options.length; o++) {
								for (let a = 0; a < that.youAnswers.length; a++) {
									if(that.topic.options[o].optionId === that.youAnswers[a]){
										opstr = opstr + that.topic.options[o].optionText + '、'
									}
								}
							}
						}
						if(that.topic.topicType == 2){
							opstr = that.youAnswer
						}
					}
					return opstr
				},
				/**showResp(){
					let that = this
					if(that.record?.recordStatus == 2){
						return false;
					}
					if(that.topic?.resp !== null && that.record?.chapter?.chapterType == 1){
						return true;
					}
					return false;
				},
				showRight() {
					let that = this
					if(that.topic?.resp == null){
						return false;
					}
					if(that.topic?.resp.respResult*1 == 0){
						return false;
					}
					if(that.record?.recordStatus == 2){
						return true;
					}
					if(that.record?.chapter?.chapterType == 0){
						return true;
					}
					return false;
				},**/
				showWrong() {
					let that = this
					if(that.topic?.resp == null){
						return false;
					}
					if(that.topic?.resp.respResult*1 == 1){
						return false;
					}
					if(that.record?.recordStatus*1 == 2){
						return true;
					}
					if(that.record?.chapter?.chapterType*1 == 0){
						return true;
					}
					return false;
				},
				showAnalysis() {
					let that = this
					if(that.record?.recordStatus*1 == 2){
						return true;
					}
					if(that.topic?.resp !== null && that.record?.chapter?.chapterType*1 == 0){
						return true;
					}
					return false;
				},
			},
			methods: {
				changeOpText(index){
					return ['A', 'B', 'C', 'D', 'E', 'F'][index]
				},
				onReback() {
					//window.location.href='/user/detail?cId=' + this.record.recordChapterId
					if(this.record.chapter.chapterType === 0){
						window.location.href='/user/home'
					}else{
						this.$dialog.confirm({
						  title: '是否退出模拟',
						  message: '退出之后返回将重新模拟做题',
						  confirmButtonText: '确认'
						}).then(() => {
						  	window.location.href='/user/index'
						}).catch(() => {});
					}
				},
				onSubmit() {
					console.log('onSubmit')
				},
				onSelectPopover(action) {
					let that = this
					if(action.text === '答题卡'){
						window.location.href='/user/detail?rId=' + that.record.recordId
					}
					if(action.text === '重做' || action.text === '重做本套题'){
						that.onReplay()
					}
					if(action.text === '重新抽取'){
						that.onReSelect()
					}
				},
				getRecord() {
					let that = this
					const dd = {
						accountId: '1',
						recordId: that.recordId
					}
					postRequst('/user/getRecordVoById', dd, true).then(function (resp) {
						that.record = resp.data
						that.getTopics()
					})
				},
				prevTopic() {
					let that = this
					that.tIndex = that.tIndex * 1 - 1
					that.getTopic()
				},
				nextTopic() {
					let that = this
					if(that.record.recordStatus*1 !== 2 && !that.topic.resp){
						that.$toast.fail('请答题');
						return false
					}
					if(that.tIndex == that.topics.length-1){
						if(that.record?.recordStatus*1 === 2){
							that.$toast.fail('已经是最后一题');
						}else{
							that.submitRecord()
						}
					}else{
						that.tIndex = that.tIndex * 1 + 1
						that.getTopic()
					}
				},
				getTopics() {
					let that = this
					const dd = {
						accountId: getLoginId(),
						chapterId: that.record.recordChapterId
					}
					postRequst('/user/getZTTopics', dd, true).then(function (resp) {
						that.topics = resp.rows
						if(!that.topics || that.topics.length == 0){
							that.$toast('题库为空');
							setTimeout(function(){
								window.location.href='/user/home'
							}, 900)
						}
						that.getTopic()
					})
				},
				getTopic() {
					let that = this
					if (that.topics) {
						that.topic = that.topics[that.tIndex]
						that.typeColor = ['primary', 'success', 'warning'][that.topic.topicType];
						that.youAnswer = ''
						that.youAnswers = []
						if(that.topic.topicType === 0 || that.topic.topicType === 2){
							if(that.topic.resp){
								that.youAnswer = that.topic.resp.respAnswer
							}
						}
						if(that.topic.topicType == 1){
							if(that.topic.resp){
								that.youAnswers =  JSON.parse(that.topic.resp.respAnswer)
							}
						}
					}
				},
				saveAnswer() {
					let that = this
					if(that.record.recordStatus*1 == 2 ){
						return false
					}
					let asForm = {
						recordId: that.recordId,
						accountId: getLoginId(),
						item: {
							///itemId:   that.topic.itemId,
							topicId:  that.topic.topicId,
							result:   0,
							answer:   that.youAnswer,
							answers:  that.youAnswers,
							dateTime: getNowDate()
						}
					}
					postRequst('/user/submitAnswer', asForm).then(function (resp) {
						if(resp.status === 0){
							//that.$toast.success(resp.msg);
							that.topics[that.tIndex].resp = resp.data
						}else{
							that.$toast.fail(resp.msg);
						}
					})
				},
				submitRecord() {
					let that = this
					/**for (let t = 0; t < that.topics.length; t++) {
						var topic = topics[t];
						if(!topic.resp){
							err = '第'+ (t+1) +'个题目未答题';
							break
						}
					}
					if(err){
						that.$toast.fail(err);
						return false
					}**/
					let dd = {
						recordId: that.recordId,
						accountId: getLoginId()
					}
					this.$dialog.confirm({
					  title: '是否提交结果',
					  message: '点击确认后得出结果',
					  confirmButtonText: '确定提交'
					}).then(() => {
					   postRequst('/user/submitRecord', dd, true).then(function (resp) {
							if(resp.status === 0){
								that.$toast.success(resp.msg);
								setTimeout(function(){
									window.location.href='/user/detail?rId=' + that.recordId
								}, 900)
							}
							that.$toast.fail(resp.msg);
						})
					}).catch(() => {
					    // on cancel
					});
				},
				onReplay() {
					let that = this
					this.$dialog.confirm({
						title: '是否重新做题',
						message: '点击确认后将清空当前答题记录',
						confirmButtonText: '确定重做'
					}).then(() => {
						const dd = {
							accountId: getLoginId(),
							recordId: that.record.recordId
						}
						postRequst('/user/reStartRecord', dd, true).then(function (resp) {
							if (resp.status === 0) {
								that.$toast.success(resp.msg);
								if(resp.data){
									that.recordId = resp.data.recordId
								}
								setTimeout(function () {
									window.location.href = '/user/answer?rId=' + that.recordId + '&index=0'
								}, 900)
							}
							that.$toast.fail(resp.msg);
						})
					}).catch(() => {
						
					});
				},
				onReSelect() {
					let that = this
					this.$dialog.confirm({
						title: '是否重新抽取',
						message: '点击确认后将清空当前数据并且重新抽取题目',
						confirmButtonText: '确定抽取'
					}).then(() => {
						const dd = {
							accountId: getLoginId(),
							recordId: that.record.recordId
						}
						postRequst('/user/reSelectRecord', dd, true).then(function (resp) {
							if (resp.status === 0) {
								that.$toast.success(resp.msg);
								if(resp.data){
									that.recordId = resp.data.recordId
								}
								setTimeout(function () {
									window.location.href = '/user/answer?rId=' + that.recordId + '&index=0'
								}, 900)
							}
							that.$toast.fail(resp.msg);
						})
					}).catch(() => {
						
					});
				},
			},
			created(){
				let that = this
			}
		}
		let vueData = {}
		let vueMethods = {}
		function vueCreated() {}
	</script>
	<script th:src="@{/js/VueCreate.js}"></script>
</body>

</html>